<template>
	<el-container>
		<el-header height="auto" id="cover">
			<!-- <h3>网站首页</h3> -->
			<!-- <h3>枫树下奶罐的个人页</h3> -->
			<!-- <h3>多种实用的小工具</h3> -->
			<!-- <h3>分享一些日常使用经验</h3> -->
			<!-- <h3>更多内容敬请期待</h3> -->
			<el-carousel height="45vh" indicator-position="outside" trigger="click" :interval="8000" pause-on-hover>
				<el-carousel-item v-for="(item, index) in banners" :key="index">
					<h3>{{ item }}</h3>
				</el-carousel-item>
			</el-carousel>
		</el-header>
		<el-main>
			<!-- <h3>正文内容</h3> -->

			<h3 class="second-title"><img src="@/assets/animeBoy.svg" width="60" alt="这里有张图" />小工具推荐</h3>
		</el-main>
	</el-container>
</template>

<script setup name="Home">
import { ref } from "vue";

// 加载轮播图数据
const banners = ref([
	"枫树下奶罐的个人页",
	"多种实用的小工具",
	"分享一些日常使用经验",
	"更多内容敬请期待 ...",
]);
</script>

<style lang="less" scoped>
#id {
	background: transparent url() no-repeat fixed center;
}

.second-title {
	display: flex;
	align-items: center;
}

.el-carousel__item h3 {
	color: rgba(0, 0, 0, 0.9);
	font-size: max(1.5rem, 2vmax);
	text-align: center;
	opacity: 0.75;
	line-height: 45vh;
	margin: auto;
}

.el-carousel__item {
	background-color: transparent;
}

.el-header {
	padding: 0;
}
</style>